<template>
	<div style="border-radius: 5px; padding: 20px;">
		<el-form size="small">
			<el-form-item>
				<el-button type="success" icon="el-icon-circle-plus-outline" @click="addOrUpdate(id='',flag=1)">新增</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="menuId" border 
		 :tree-props="{children: 'child'}">
			<el-table-column prop="menuId" label="menuId"  width="150">
			</el-table-column>
			<el-table-column prop="level" label="菜单级别" align="center" width="100">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.level===0" size="small" type="primary">
						菜单
					</el-tag>
					<el-tag v-else-if="scope.row.level===1" size="small" type="success">
						目录
					</el-tag>
					<el-tag v-else size="small" type="warning">
						按钮
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="menuName" label="菜单名称" align="center" width="200">
			</el-table-column>
			<el-table-column prop="parentName" label="上级菜单" align="center" width="150">
			</el-table-column>
			<el-table-column prop="url" label="url路径" show-overflow-tooltip align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="permissionUrl" label="权限路径" show-overflow-tooltip align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="remark" label="备注" align="center" width="170">
			</el-table-column>
			<el-table-column prop="status" label="状态" align="center" width="100">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.status===0" size="small" type="danger">
						不可用
					</el-tag>
					<el-tag v-else size="small">可用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="updateTime" label="修改时间" align="center" width="170">
				<template slot-scope="scope">
					{{scope.row.updateTime | formatDate}}
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="120">
				<template slot-scope="scope">
					<el-button @click="addOrUpdate(scope.row.menuId,flag=2)" type="text" size="small">编辑</el-button>
					<el-button @click="deleteMenu(scope.row.menuId)" type="text" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getMenuData"></add-or-update>
	</div>
</template>

<script>
	import {
		getMenuList,
		deleteMenu
	} from '@/api/system/menu/menu.js'
	import {
		formatDate
	} from '@/utils/common.js'
	import AddOrUpdate from './menuAddorUpdate'
	export default {
		created: function() {

		},
		components:{
			AddOrUpdate
		},
		mounted: function() {
			this.getMenuData()
		},
		methods: {
			getMenuData() {
				getMenuList(null, '', null,null).then(data => {
					//console.log(data)
					if(data.code=='0000'){
						this.tableData = data.data
					}else{
						this.$message.error(data.msg)
					}
					
				})
			},
			addOrUpdate(id,flag){
				this.addOrUpdateVisible = true
				this.$nextTick(function(){
					this.$refs.addOrUpdate.init(id,flag)
				})
			},
			deleteMenu(menuId){
				this.$confirm(`是否删除菜单${menuId}?`,'提示',{
					confirmButtonText:'确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(()=>{
					deleteMenu(menuId).then(data=>{
						if(data.code=='0000'){
							this.$message.success(data.msg)
							this.getMenuData()
						}else{
							this.$message.error(data.msg)
						}
					})
				}).catch(()=>{
					this.$message.info(`已取消删除菜单${menuId}`)
				})
			}
		},
		filters: {
			formatDate(time) {
				var date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		},
		data() {
			return {
				tableData: [],
				addOrUpdateVisible:false,
			}
		}
	}
</script>

<style>
</style>
